<template>
  <div id="box">
    <header>
      <van-nav-bar
        title="商品详情"
        left-text="返回"
        right-text="分享"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        />
    </header>

    <!-- 详情轮播 -->
    <section>
      <van-swipe class="lunbo" indicator-color="white">
        <van-swipe-item><img :src="this.list.pimg" alt=""></van-swipe-item>
        <van-swipe-item><img :src="this.list.pimg" alt=""></van-swipe-item>
        
      </van-swipe>
      <div class="deatil">
         <h2>
             <van-tag class="biao" type="danger">天猫</van-tag>
             <span>【拍两件{{this.list.pprice}}】{{this.list.pname}}</span>
        </h2> 
        <div class="wujia">
            <div>
                <span>用卷后￥{{this.list.pprice}}</span>
                <span>已售18.1万</span>
            </div>
            <div>
                <span>天猫价{{this.list.pprice*2}}￥</span>
                <span>
                    <b><van-icon name="passed" />包邮</b>
                    <b><van-icon name="passed" />运费险</b>
                    
                </span>
            </div>
        </div>
        <!-- 优惠价 -->
        <div class="youhui">
            <img src="../assets/下载.jpg" alt="">
        </div>
        <div class="desc">
            <p>{{this.list.pdesc}}</p>
        </div>
      </div>
    
    </section>

<!-- 底部 -->
    <footer>
        <div>
            <van-icon name="star-o" />
            <p>收藏</p>
        </div>

        <div>
            <p>￥{{this.list.pprice*2}}</p>
            <p>不领劵</p>
        </div>
        <van-button  class="right"  type="primary">领劵后{{this.list.pprice}}￥

            
        </van-button>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      qian: 69,
      juan:29.80,
      list:''
    };
  },
  methods: {
      onClickLeft(){
          this.$router.go(-1)
      },
     
  },
  mounted() {
      let params = {id:this.$route.params.id}
      console.log(params)
      this.$api.getDeatil(params)
      .then((data)=>{
          console.log(data)
          this.list=data.data
      })
  },
};
</script>
<style scoped>
#box {
    height: 100vh;
  display: flex;
  flex-direction: column
}
.lunbo {
  height: 350px;

  background: red;
}
header{
    height: 44px;
}
footer {
  height: 50px;
 border-top: 1px solid red;
 display: flex;
 justify-content: space-around;
 align-items: center
}
footer div {
    display: flex;
    flex-direction: column;
    align-items: center
}
section{flex: 1;
    overflow: auto;
}
.deatil {
    margin-top:20px;
    margin-left: 10px;
}
.biao{margin-right: 10px;}
.wujia{
    margin-top: 10px;
    display: flex;
    flex-direction: column
}
.wujia div span:last-child{
    float: right;
}
.wujia div {
    margin: 10px;

}
.wujia div:last-child{
    margin-top: 0;
}
.youhui img{
    height: 60px;
    width: 100%;
    background: blue;
}
.desc{
    margin-top:10px;
}
.lunbo img {
    height: 100%;
    width: 100%;
}
</style>